<template>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
				<view class="top_box_title">全部订单</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
		</view>
		<view class="con">
			<view class="box">
				<view class="dish">
					<view class="dish_nr" v-for="(item, index) in list" :key="index">
						<image class="dish_nr_img" :src="item.photo" mode=""></image>
						<view class="dish_nr_title">{{ item.title }}</view>
						<view class="dish_nr_text">¥{{ item.price }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let id = ref(1)
	let list = ref([])

	const indexlist = async () => {
		await http.noAuthpost('/srapi/yuangong/qbcaixi', { id: id.value }).then((res) => {
			console.log('返回值', res)
			list.value = res.data
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
		indexlist()
	})
</script>

<style lang="less" scoped>
	.top {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		padding-bottom: 20rpx;
		background: #ffe4d9;

		background: linear-gradient(0deg, #fce8e1 0%, #ffe3d9 30%);
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}

			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.con {
		position: relative;
		min-height: 50vh;
		background: linear-gradient(0deg, #f4f5f9 70%, #fce8e1 100%);

		.box {
			padding: 0 30rpx 30rpx;
		}
	}

	.dish {
		display: grid;
		/*等额 分成 1fr份*/
		grid-template-columns: 1fr 1fr;
		grid-gap: 20rpx;
		.dish_nr {
			width: 335rpx;
			background: #ffffff;
			border-radius: 12rpx;
			.dish_nr_img {
				width: 335rpx;
				height: 335rpx;
				margin-bottom: 20rpx;
				border-radius: 12rpx 12rpx 0 0;
			}
			.dish_nr_title {
				padding-left: 15rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 13rpx;
			}
			.dish_nr_text {
				padding-left: 15rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				padding-bottom: 30rpx;
			}
		}
	}

	//
</style>
